<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.sql.*" %>
<%@ page import="com.data.ConnData" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目列表</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/card.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>

        /* 题目名称链接样式，可根据喜好调整样式 */
        .question-title-link {
            text-decoration: none;
            color: #4CD263;
            font-weight: bold;
            display: block;
            margin-bottom: 10px;
        }

        /* 鼠标悬停在题目名称上的样式 */
        .question-title-link:hover {
            text-decoration: underline;
            color: #0056b3;
        }
    </style>
    <script>
        $(document).ready(function () {

            // 为题目名称链接添加点击事件，跳转到题目详细内容页面，并传递题目ID作为参数
            $(document).on('click', '.question-title-link', function (e) {
                e.preventDefault();
                var questionId = $(this).data('question-id');
                window.location.href = "question_detail.jsp?question_id=" + questionId;
            });
        });
    </script>
</head>

<body>
<ul class="nav nav-pills" style="padding-top: 20px">
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link"  style="color: black" href="conversation.jsp">笔记</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link active" href="question.jsp">题目</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="rank.jsp">排行榜</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="me.jsp">我的</a>
    </li>
</ul>
<hr>
<%
    request.setCharacterEncoding("utf-8");

    ConnData objdata = new ConnData();
    Connection connection = null;
    PreparedStatement psmt = null;
    ResultSet resultSet = null;
    try {
        connection = objdata.getConn();
        String sql = "SELECT question_name, question_content, question_id FROM question_table";
        psmt = objdata.getPsmt(sql);
        resultSet = psmt.executeQuery();
%>
<ul>
    <%
        while (resultSet.next()) {
            String questionName = resultSet.getString("question_name");
            String questionContent = resultSet.getString("question_content");
            String questionId = resultSet.getString("question_id");
    %>

    <div style="width: 80%;
                margin: 0 auto;
                margin-bottom: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
                background-color: white;
                padding: 40px;">
        <input type="hidden" name="question_id" value="<%=questionId%>">
        <p><a href="#" class="question-title-link" data-question-id="<%=questionId%>"><%=questionName%></a></p>
        <p><%=questionContent%></p>

    </div>
    <%
        }
    %>
</ul>
<%
} catch (SQLException e) {
    e.printStackTrace();
%>
<p>数据库操作出现错误，请稍后再试！</p>
<%
    } finally {
        if (resultSet!= null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (psmt!= null) {
            try {
                psmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection!= null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
%>
</body>

</html>